<template>
  <h1>{{ number }}</h1>
  <button @click="btn(1)">点击加1</button>
  <button @click="btn(10)">点击加10</button>
  <!-- 🔔 3.在模板中, ref 属性会自动解套, 不需要额外的 .value -->
  <button @click="number+=1">点击加10</button>
  <button @click="number+=10">点击加10</button>
</template>

<script>
  /* 
  ref 函数：
    1. ref 函数接收一个的值, 返回一个ref 响应式对象,  有唯一的属性 value
    2. 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问或修改到值
    3. 在模板中, ref 属性会自动解套, 不需要额外的 .value
    4. ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理(项目中会用到)
  */
  import { reactive, ref } from "vue";
  export default {
    name: "App",
    setup() {
      // 🔔 1.ref 函数接收一个的值, 返回一个ref 响应式对象,  有唯一的属性 value
      const number = ref(100)
      // console.log(number);  // ref 响应式对象
      const btn = (val) => {
        // 🔔 2. 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问或修改到值
        number.value += val
      };
      return { number, btn };
    },
  };
</script>
